<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>登陆</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/reset.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/supersized.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/style_login.css"/>
<!-- Javascript -->
<script src="<%=request.getContextPath()%>/js/jquery-1.8.2.min.js"></script>
<script src="<%=request.getContextPath()%>/js/supersized.3.2.7.min.js"></script>
<script src="<%=request.getContextPath()%>/js/supersized-init.js"></script>
</head>
<body>
	<div class="page-container">
		<h1>威士劳赫</h1>
		<form action="#" method="post">
			<input type="text" name="loginName" class="username" id="loginName"
				placeholder="用户名" required oninvalid="setCustomValidity('不能为空')"
				oninput="setCustomValidity('')">
			<!--  <input type="text" name="loginName" class="username" id="loginName" placeholder="用户名" required="11111"> -->
			<input type="password" name="password" class="password" id="password"
				placeholder="密码" required>
			<div style="margin-bottom: 18px;">
				<input id="checkbox" type="checkbox" onclick="alert(1);"
					style="width:20px;height:20px;margin-left:180px;display: inline;" />
				<p style="width:80px;float:right;margin-top:28px;">记住密码</p>
			</div>
			<div id="errorMsg" style="display:inline;"></div>
			<button type="button" id="submit">登陆</button>
		</form>
	</div>
	
	<script type="text/javascript">
		$(function() {
			var reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]{4,16}$/;
			$("#submit").unbind("click");
			$("#submit")
					.click(
							function() {
								var loginName = $("#loginName");
								var password = $("#password");
								var checkbox = $("#checkbox").attr("checked");
								console.log(loginName.val() + "    "
										+ password.val() + "  " + checkbox);
								var errorMsg = $("#errorMsg");
								$(errorMsg).text("");
								if (loginName.val() == "用户名") {
									$(errorMsg).text("用户名不能为空");
									$(loginName).focus();
									return;
								} else if (!reg.test(loginName.val())) {
									$(errorMsg).text("用户名由 字母 数字 _ 构成 且5~12位");
									$(loginName).focus();
									return;
								} else if (password.val() == "密码") {
									$(errorMsg).text("密码不能为空");
									$(password).focus();
									return;
								} else {
									$.ajax({
												type : "post",
												url : "login.action",
												data : {
													"distributor_account" : loginName
															.val(),
													"distributor_password" : password.val(),
													"checkbox" : checkbox,
												},
												dataType : "json",
												success : function(data) {
													if (data.tip == "error") {
														$(errorMsg).text(
																data.error);
													} else {
														window.location.href = "<%=request.getContextPath()%>/home/index.action";
													}
												},
											});
								}
							});
		});
	</script>
</body>
</html>

